import { Button, Image } from "antd";
import React from "react";
import TheImage from "@/components/TheImage";
import "../style/style.less";
import { apiMemberDynamicDetail } from '@/request/users'
import VideoPlayer from "@/components/VideoPlayer"
import _ from 'lodash'

class DynamicDetails extends React.Component {
  state = { data: [] }
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    let res = await apiMemberDynamicDetail({ dynamicId: this.props.dynamicId })
    if (res.code === 0 && res.data) {
      let dynamicImages = []
      if(res.data.type === "video"){
        dynamicImages = res.data.dynamicImages ? res.data.dynamicImages.split('|') : []
      }else{
        dynamicImages = res.data.dynamicImages ? res.data.dynamicImages.split(',') : []
      }
      let dynamicLabels = _.map(res.data.dynamicLabels, v => v.labelName)
      this.setState({
        data: {
          ...res.data,
          dynamicImages,
          dynamicLabels
        }
      })
    }
  }
  render() {
    const { nickName } = this.props
    const { data } = this.state
    return (
      <div className="dynamic-details-box">
        <div className="nick-name">{nickName}</div>
        <div className="time">{data.createTime}</div>
        {
          !_.isEmpty(data.dynamicImages) && <div className="pictures">
            {data.type === "video"? 
              <VideoPlayer  src={data.dynamicImages[0]} poster={data.dynamicImages[1]} />
              :data.dynamicImages.map((v, i) => {
                return <Image
                  key={i}
                  width={100}
                  height={100}
                  src={v}
                />
              })
            }
          </div>
        }
        <div className="content">
          {data.dynamicText}
        </div>
        {
          !_.isEmpty(data.dynamicLabels) && <div className="tags">{
            data.dynamicLabels.map(v => `#${v}`)
          }</div>
        }
        <div className="likes">点赞：{data.likeNum}</div>
        <div className="comments">评论：{data.comments}</div>
        <div className="button-group">
          <Button onClick={this.props.closeDialog}>关闭</Button>
        </div>
      </div>
    );
  }
}

export default DynamicDetails;
